import 'dart:async';
import 'package:flutter/material.dart';
// import 'package:get/get.dart';
// import 'package:cached_network_image/cached_network_image.dart';

////https://github.com/flutter/flutter/issues/20910
///App Crashes when Image.network fails to resolve URL
///
///Image.Network causes HTTP request failed, statusCode: 403 error when displaying images that is public on AWS S3
///https://github.com/flutter/flutter/issues/48825
///
class NetworkImageModified extends StatelessWidget {
  final String url;
  NetworkImageModified(this.url);
  Future<bool> cacheImage(String url, BuildContext context) async {
    bool hasNoError = true;
    var output = Completer<bool>();
    precacheImage(
      NetworkImage(url),
      context,
      onError: (e, stackTrace) => hasNoError = false,
    ).then((_) => output.complete(hasNoError));
    return output.future;
  }

  @override
  Widget build(context) {
    //return
    // FutureBuilder(
    //     future: cacheImage(url, context),
    //     builder: (context, snapshot) {
    //       if (snapshot.connectionState == ConnectionState.none ||
    //           snapshot.hasError) {
    //         return Container(
    //           height: 200.0,
    //           width: 156,
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Image.asset('assets/images/imagenotavailable.png'),
    //         );
    //       }
    //       if (snapshot.connectionState == ConnectionState.waiting) {
    //         return Container(
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Center(
    //             child: CircularProgressIndicator(),
    //           ),
    //         );
    //       }
    //       if (snapshot.data == false) {
    //         return Container(
    //           height: 200.0,
    //           width: 156,
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Image.asset('assets/images/imagenotavailable.png'),
    //         );
    //       }
    //       return Image.network(
    //         url,
    //         fit: BoxFit.cover,
    //       );
    //     },
    //   );
    return FutureBuilder(
      future: cacheImage(url, context),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.none ||
            snapshot.hasError) {
          return Container(
            height: 200.0,
            width: 156,
            decoration: BoxDecoration(color: Colors.grey[50]),
            child: Icon(
              Icons.image_search_sharp,
              size: 60,
            ),
            //child: Image.asset('assets/images/imagenotavailable.png'),
          );
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Container(
            decoration: BoxDecoration(color: Colors.grey[50]),
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
        if (snapshot.data == false) {
          return Container(
            height: 200.0,
            width: 156,
            decoration: BoxDecoration(color: Colors.grey[50]),
            child: Icon(
              Icons.image_search_sharp,
              size: 60,
            ),
            //child: Image.asset('assets/images/imagenotavailable.png'),
          );
        }
        return Image.network(
          url,
          fit: BoxFit.cover,
        );
      },
    );
    // if (GetPlatform.isWeb) {
    //   return FutureBuilder(
    //     future: cacheImage(url, context),
    //     builder: (context, snapshot) {
    //       if (snapshot.connectionState == ConnectionState.none ||
    //           snapshot.hasError) {
    //         return Container(
    //           height: 200.0,
    //           width: 156,
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Icon(
    //             Icons.image_search_sharp,
    //             size: 60,
    //           ),
    //           //child: Image.asset('assets/images/imagenotavailable.png'),
    //         );
    //       }
    //       if (snapshot.connectionState == ConnectionState.waiting) {
    //         return Container(
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Center(
    //             child: CircularProgressIndicator(),
    //           ),
    //         );
    //       }
    //       if (snapshot.data == false) {
    //         return Container(
    //           height: 200.0,
    //           width: 156,
    //           decoration: BoxDecoration(color: Colors.grey[50]),
    //           child: Icon(
    //             Icons.image_search_sharp,
    //             size: 60,
    //           ),
    //           //child: Image.asset('assets/images/imagenotavailable.png'),
    //         );
    //       }
    //       return Image.network(
    //         url,
    //         fit: BoxFit.cover,
    //       );
    //     },
    //   );
    // } else {
    //   try {
    //     return CachedNetworkImage(
    //         //httpHeaders:
    //         imageUrl: url,
    //         imageBuilder: (context, imageProvider) => Container(
    //               decoration: BoxDecoration(
    //                 image: DecorationImage(
    //                     image: imageProvider, fit: BoxFit.cover),
    //               ),
    //             ),
    //         placeholder: (context, url) {
    //           return Container(
    //             decoration: BoxDecoration(color: Colors.grey[50]),
    //             child: Center(
    //               child: Icon(Icons.image_search_sharp),
    //               //CircularProgressIndicator(),
    //             ),
    //           );
    //         },
    //         errorWidget: (context, url, error) {
    //           // if (error.statusCode == 403) {
    //           //   //Log.debug('image 403: $url');
    //           // }
    //           Log.debug('image 403: $url');
    //           return Container(
    //             height: 200.0,
    //             width: 156,
    //             decoration: BoxDecoration(color: Colors.grey[50]),
    //             //child: Icon(Icons.image_search_sharp),
    //             child: Icon(
    //               Icons.image_search_sharp,
    //               size: 60,
    //             ),
    //             //Image.asset('assets/images/imagenotavailable.png'),
    //           );
    //         });
    //   } catch (error) {
    //     Log.debug(error);
    //     return Container(
    //       height: 200.0,
    //       width: 156,
    //       decoration: BoxDecoration(color: Colors.grey[50]),
    //       child: Icon(
    //         Icons.image_search_sharp,
    //         size: 60,
    //       ),
    //     );
    //   }
    // }
  }
}
